<!--空白页面参考模版-->
{extend name="public/base" /} {block name='content'} {include file='public/content_header' /}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <form id="dataForm" class="dataForm form-horizontal" action="{:url('sendEmail')}" method="post" enctype="multipart/form-data">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="fields-group">
                            <div class="form-group">
                                <label for="salary_time" class="col-sm-2 control-label">工资时间</label>
                                <div class="col-sm-10 col-md-4">
                                    <input id="salary_time" name="salary_time" value="{$salary_time|default=''}" placeholder="请选择工资时间" type="text" class="form-control filed-year-month" autocomplete="off">
                                </div>
                            </div>
                            <script>
                                // var date = new Date;
                                // var year = date.getFullYear();
                                // var mon = date.getMonth();
                                // var currentTime = year+'-'+mon;
                                laydate.render({
                                    elem: '#salary_time',
                                    type: 'month',
                                    btns:[],
                                    ready: function (date) {
                                        $(".layui-laydate").on('click', 'ul li', function () {
                                            $(".layui-laydate").remove();
                                        });
                                    },
                                    change: function (value) {
                                        $("#salary_time").val(value);
                                        $.ajax({
                                            url: "{:url('getStaffBySalaryTime')}",
                                            type: "post",
                                            data: {
                                                "salary_time": value
                                            },
                                            dataType: "json",
                                            sync: false,
                                            success: function(res) {
                                                console.log(res);
                                                if (res.code === 0) {
                                                    layer.alert(res.msg, {
                                                        icon: 0,
                                                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                    })
                                                    $('#staff').empty();
                                                } else {

                                                    $('#staff').empty();
                                                    $('#staff').append(`<option value=""></option>`);
                                                    var _html = '';
                                                    $.each(res.data, function(e, v) {

                                                        _html +=
                                                            `<option value="${v.staff.id}">${v.staff.name}</option>`;
                                                    })
                                                    $('#staff').append(_html).trigger('change.select2');
                                                    $('#staff').select2({});
                                                }
                                            }
                                        })
                                    },
                                });
                            </script>
                            <div class="form-group">
                                <label for="staff" class="col-sm-2 control-label">员工选择</label>
                                <div class="col-sm-10 col-md-4">
                                    <select name="staff[]" id="staff" data-placeholder="请选择员工选择" class="form-control field-multi-select" multiple="multiple">
                                        {foreach name='staff_list' id='item'}
                                        <option data-id="{$item.id}" {if isset($staff_id) && $staff_id==$item.staff.id}selected{/if} value="{$item.staff.id}">
                                            {$item.staff.name}
                                        </option>
                                        {/foreach}

                                    </select>
                                </div>

                            </div>
                            <script>
                                $('#staff').select2();
                                $('#staff').on("select2:open", function(e) {
                                    if ($('#staff').select2('val').length != $('#staff option').length || $('#staff').select2('val').length === 0) {
                                        $("input[id='is_all']").bootstrapSwitch("state", false);
                                    } else {
                                        $("input[id='is_all']").bootstrapSwitch("state", true);
                                    }
                                });
                                $('#staff').on('select2:select', function(e) {

                                })
                                $('#staff').on("select2:close", function(e) {
                                    if ($('#staff').select2('val').length != $('#staff option').length || $('#staff').select2('val').length === 0) {
                                        $("input[id='is_all']").bootstrapSwitch("state", false);
                                    } else {
                                        $("input[id='is_all']").bootstrapSwitch("state", true);
                                    }
                                })
                            </script>

                            <div class="form-group">
                                <label for="is_all" class="col-sm-2 control-label">全部员工</label>
                                <div class="col-sm-10 col-md-4">
                                    <input class="input-switch" id="is_all" value="1" {if !isset($staff_id)}checked{/if} type="checkbox" />
                                    <input class="switch field-switch" placeholder="全部员工" name="is_all" value="{if isset($staff_id)}0{else}1{/if}" hidden />
                                </div>
                            </div>

                            <script>
                                $('#is_all').bootstrapSwitch({
                                    onText: "是",
                                    offText: "否",
                                    onColor: "success",
                                    offColor: "danger",
                                    onSwitchChange: function(event, state) {
                                        $(event.target).closest('.bootstrap-switch').next().val(state ? '1' : '0').change();
                                        if (state === true) {
                                            $("#staff").val(null).trigger('change');
                                        }
                                    }
                                });
                            </script>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">字段选择</label>
                                <div class="col-sm-10 col-md-4">
                                    <div class="checkbox">

                                        {foreach name="fields" key="key" item="vo"}
                                        <label>
                                            <input type="checkbox" {if isset($field) && in_array($key,$field)}checked{/if} value="{$key}" name="checkbox[]" class="field-checkbox"><p>{$vo}</p>
                                        </label> {/foreach}

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="subject" class="col-sm-2 control-label">主题</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-file-text"></i></span>
                                        <input maxlength="300" id="subject" name="subject" class="form-control" placeholder="主题">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="subject" class="col-sm-2 control-label">邮件正文</label>
                                <div class="col-sm-8">

                                    <textarea id="content" name="content" class="form-control" style="height: 300px" placeholder="邮件正文"></textarea>

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="file" class="col-sm-2 control-label">附件</label>
                                <div class="col-sm-10 col-md-4">
                                    <input id="file" name="file[]" placeholder="请上传附件" multiple="multiple" type="file" class="form-control field-multi-image">
                                </div>
                            </div>
                            <script>
                                $(function() {
                                            $('#file').fileinput({
                                                    "initialPreview": false,
                                                    overwriteInitial: true,
                                                    language: 'zh',
                                                    browseLabel: '浏览',
                                                    initialPreviewAsData: true,
                                                    initialPreviewShowDelete: false,
                                                    dropZoneEnabled: false,
                                                    showUpload: false,
                                                    showRemove: false,
                                                    allowedFileTypes: ['image'],
                                                    //默认限制10M
                                                    maxFileSize: 10240,
                                                    {if isset($data)}
                                                    initialPreview: {$data -> getData('file') | raw},
                                                    {/if}
                                                    });
                                            })
                            </script>


                        </div>

                        <div class="box-footer">
                            {:token()}
                            <div class="col-sm-2">
                            </div>
                            <div class="col-sm-10 col-md-4">
                                <div class="btn-group">
                                    <button type="submit" class="btn flat btn-info dataFormSubmit">
                                   发送
                                </button>
                                </div>
                                <div class="btn-group">
                                    <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                                </div>
                            </div>
                        </div>

                </form>
                </div>
            </div>
        </div>

</section>

<script>
    $('#dataForm').validate({
        rules: {
            'salary_time': {
                required: true,
            },
            'checkbox': {
                required: true,
            },
        },
        messages: {
            'salary_time': {
                required: "工资时间不能为空",
            },
            'checkbox': {
                required: "发送字段不能为空",
            },

        }
    });
</script>

{/block}